<template>
  <div id="home">
    <div class="navList">
      <el-menu
          background-color="#00a1a1"
          active-text-color="#ffffff"
          text-color="#ffffff"
          default-active="2"
          :router="true"
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
          <template #title>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>自定义表单管理</span>
          </template>
          <el-menu-item index="/customFormList">
            <el-icon><UserFilled /></el-icon>
            <template #title>
              <span>自定义表单列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>组织架构</span>
          </template>
          <el-menu-item index="/personnelList">
            <el-icon><UserFilled /></el-icon>
            <template #title>
              <span>人员列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/organizationalStructure">
            <el-icon><Menu /></el-icon>
            <template #title>
              <span>组织架构</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><DocumentCopy /></el-icon>
            <span>工作流管理</span>
          </template>
          <el-menu-item index="/workflowList">
            <el-icon><Memo /></el-icon>
            <template #title>
              <span>工作流列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Tickets /></el-icon>
            <span>审批管理</span>
          </template>
          <el-menu-item index="/approvalList">
            <el-icon><Memo /></el-icon>
            <template #title>
              <span>审批列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/approvedList">
            <el-icon><DocumentChecked /></el-icon>
            <template #title>
              <span>已审批列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>系统配置</span>
          </template>
          <el-menu-item index="/customForm23123">
            <el-icon><Crop /></el-icon>
            <template #title>
              <span>小程序主页配置</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/customForm23133">
            <el-icon><Orange /></el-icon>
            <template #title>
              <span>审批流程配置</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/role">
            <el-icon><Orange /></el-icon>
            <template #title>
              <span>角色管理</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="homeWindow">
      <div class="homeWindowTop">
        <div class="homeWindowTopLeft">{{ title }}</div>
        <div class="homeWindowTopRight">
          <span style="margin-right: 15px;cursor: pointer">admin</span>
          <el-icon style="margin-right: 15px;cursor: pointer"><Setting  /></el-icon>
          <el-icon style="cursor: pointer"><SwitchButton /></el-icon>
        </div>
      </div>
      <div class="homeWindowView">
        <div class="homeWindowViewBody" ref="homeWindowViewBody">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="home">
import {ref, watch, onMounted, nextTick} from "vue";
import { useRouter } from 'vue-router'
const title = ref('首页')
const homeWindowViewBody = ref(null)
const router = useRouter()
import { useStore } from 'vuex'
const store = useStore()    //获取store对象
onMounted(() => {
  nextTick(() => {
    console.log(homeWindowViewBody.value.clientHeight)
    store.commit('setHomeHeight', homeWindowViewBody.value.clientHeight)
  })
})

window.onresize = () => {
  store.commit('setHomeHeight', homeWindowViewBody.value.clientHeight)
}

watch(() =>router.currentRoute.value,(newValue,oldValue)=> {
  console.log('watch',newValue);
  title.value = newValue.meta.title
},{ immediate: true })
</script>
<style scoped lang="less">
#home {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  position: fixed;

  .navList {
    width: 200px;
    flex-basis: 200px;
    height: 100%;
    flex-shrink: 0;
    background: #00a1a1;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .homeWindow {
    width: calc(100% - 200px);
    flex-basis: calc(100% - 200px);
    flex-shrink: 0;
    height: 100%;
    background-color: #eeeeee;

    .homeWindowTop {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 15px;
      justify-content: space-between;
      display: -webkit-flex;
      display: -moz-flex;
      background-color: #ffffff;

      .homeWindowTopLeft {
        width: max-content;
        font-size: 14px;
        color: #777777;
      }

      .homeWindowTopRight {
        width: max-content;
        align-items: center;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
      }
    }

    .homeWindowView {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      height: calc(100% - 50px);

      .homeWindowViewBody {
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
      }
    }
  }
}
</style>
